<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Combo Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/combo.css";
</style>
<script src="js/dw_scroll_dx.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // hide loading gif
  var load_lyr = document.getElementById? document.getElementById("loading"): document.all? document.all["loading"]: null;
  if (load_lyr) load_lyr.style.visibility = "hidden";
  
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1', 'imgTbl');
  wndo.setUpScrollbar("dragBar1", "track1", "v", 1, 1);
  wndo.setUpScrollbar("dragBar2", "track2", "h", 1, 1);

  // not at 0,0 for this demo
  dw_scrollObj.scrollTo('wn', 180, 180, 1);
}
</script>	
</head>
<body onload="initScrollLayer()">

<h1>Combining Features</h1>

<p>This example document demonstrates how all the features of the scrolling layers code are integrated and can be used in concert. (All code is in <a href="js/dw_scroll_dx.js">dw_scroll_dx.js</a>)</p>

<div id="hold">
  <div id="wn"> 
    <!-- loading gif layer, hidden onload -->
    <div id="loading" class="content"><img src="images/loading.gif" width="99" height="16" alt="" /></div>  
    <!-- scrolling layer here -->
  	<div id="lyr1" class="content">
      <table id="imgTbl" border="0" cellpadding="0" cellspacing="0">
        <tr>
        	<td><img src="images/sunset.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/deco.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/cave-art.gif" width="150" height="150" alt="" /></td>
         	<td><img src="images/swans.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/astro.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/design1.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mandala2.gif" width="150" height="150" alt="" /></td>
         	<td><img src="images/turtle.gif" width="150" height="150" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/om.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mex-sun.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/cranes.gif" width="150" height="150" alt="" /></td>
         	<td><img src="images/balloon.gif" width="106" height="131" alt="" /></td>
        </tr>
        <tr>
        	<td><img src="images/crystal.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/mandala1.gif" width="150" height="150" alt="" /></td>
        	<td><img src="images/kitty.gif" width="150" height="150" alt="" /></td>
         	<td><img src="images/heron.gif" width="100" height="100" alt="" /></td>
        </tr>
      </table>

  	</div>
	
  </div> <!-- end wn -->
  
  <div id="scrollbar1">
    <div id="up1"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','up')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-up.gif" width="11" height="11" alt="" /></a></div>
    <div id="track1">
      <div id="dragBar1"></div>
    </div>
    <div id="down1"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','down')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-dn.gif" width="11" height="11" alt="" /></a></div>
  </div>
  
  <div id="scrollbar2">
    <div id="left2"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','left')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-lft.gif" width="11" height="11" alt="" /></a></div>
    <div id="track2">
      <div id="dragBar2"></div>
    </div>
    <div id="right2"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','right')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-rt.gif" width="11" height="11" alt="" /></a></div>
  </div>
  
  
  <div id="linksLyr">
     <!-- dw_scrollObj.scrollTo arguments: scroll area id (this is also first argument to constructor), 
         destination on x, y axes, (optional, not included here) duration of glide 
         Height and width of images and table cells determine location to glide to 
         dw_scrollObj.initScroll arguments: scroll area id (this is also first argument to constructor), 
         'up', 'down', 'left', 'right' or angle (0 to 360)   -->
         
    <table id="lnks" border="0" cellpadding="0" cellspacing="12">
     <tr>
      <th>Click Scroll To:</th><th>Hover Scroll At:</th>
     </tr>
     <tr>
      <td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',540,180); return false">Turtle</a></td>
      <td><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn',240)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">240</a> &deg;</td>
     </tr>
     <tr>
      <td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',540,0); return false">Swans</a></td>
      <td><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn',45)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">45</a> &deg;</td>
     </tr>
     <tr>
      <td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,540); return false">Crystal</a></td>
      <td><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn',120)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">120</a> &deg;</td>
     </tr>
     <tr>
      <td><a href="javascript:;" onclick="dw_scrollObj.scrollTo('wn',0,0); return false">Sunset</a></td>
      <td><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn',320)" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')">320</a> &deg;</td>
     </tr>
    </table>
  </div>
  
</div><!-- end hold -->

<p>Mouseover scrolling at an angle stops when an edge is reached on either axis.</p>

<p><em>Note:</em> Most of the images for this example are not included in the download file.</p>


<p><a href="http://www.dyn-web.com">www.dyn-web.com</a></p>

</body>
</html>
